<template>
  <el-card>
    <div slot="header" class="me-tag-header">
      <span>防诈案例展示</span>
      <a @click="moreTags('antiFraud')" class="me-pull-right me-tag-more moreList">更多</a>
    </div>

    <ul class="me-tag-list">
      <li class="me-tag-item" v-for="(item,index) in antiFraudList" :key="index">
        <a @click="toInfo(item.id,'antiFraud')" slot="reference" :title="item.title" >
          {{ item.title.length > 17 ? item.title.substring(0, 17) + "..." : item.title }}
        </a>
      </li>
    </ul>
  </el-card>

</template>

<script>
import {listAntiFraudArticles} from "@/api/resources/antiFraudArticles.js";
export default {
  name: 'CardTag',
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      antiFraudList:[]
    }
  },
  created() {
    this.init();
  },
  methods: {
    init(){
      listAntiFraudArticles(this.addDateRange(this.queryParams)).then(response => {
        this.antiFraudList = response.rows;
      });
    },
    moreTags(type){
      if(type === 'security'){
        this.$router.push({path:'/securityArticles/list'})
      }else if(type === 'antiFraud') {
        this.$router.push({path:'/antiFraudArticles/list'})
      }else {
        this.$router.push({path:'/securityArticles/list'})
      }
    },
    toInfo(id,type){
      if(type === 'security'){
        this.$router.push({path:'/securityArticles/info',query:{id:id}})
      }else if(type === 'antiFraud') {
        this.$router.push({path:'/antiFraudArticles/info',query:{id:id}})
      }else {
        this.$router.push({path:'/securityArticles/info',query:{id:id}})
      }
    }
  }
}
</script>

<style scoped>
.me-tag-header {
  font-weight: 600;
}
.me-tag-more {
  font-size: 14px;
  color: #78b6f7;
}

.me-tag-list {
  list-style-type: none;
}

.me-tag-item {
  display: inline-block;
  padding: 4px;
  font-size: 14px;
  line-height: 30px;
}

.me-tag-item a:hover {
  text-decoration: underline;
}
.me-tag-item a{
    color: #333;
    text-decoration: none;
}
.moreList{
  padding-right: 16px;
  background: url(../../assets/img/btn_more.png) no-repeat center right 1px;
  line-height: 27px;
  font-size: 14px;
  color: #999;
}
</style>
